<template>
  <div class="common-comment">
    <div class="comment-header">
      <span>提交评论</span>
      <span>返回</span>
    </div>
    <mt-field placeholder="评论内容" type="textarea" rows="4" v-model="introduction"></mt-field>
    <div class="btn-field">
      <mt-button type="primary" @click="handleSubmitComment">提交评论</mt-button>
    </div>
    <div class="comment-list">
      <div class="list-header">
        <span>评论列表</span>
        <span>{{ commentsListLength }}条评论</span>
      </div>
      <div v-for="(item, index) in commentsList" :key="index" class="list-item">
        <div>
          <span>{{ item.user_name }}：</span>
          <span>{{ item.content }}</span>
        </div>
        <span>{{ item.add_time | formatDate }}</span>
      </div>
    </div>
    <div class="btn-field">
      <mt-button icon="more" @click="loadMore">更多评论</mt-button>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from 'vuex';
export default {
  name: 'comment',
  data () {
    return {
      introduction: '',
      page: 1,
    }
  },
  props: ['id'], // 将id以参数形式传递，和该组件解耦
  methods: {
    ...mapActions(['getCommentsList', 'submitComment']),
    loadMore () {
      this.page ++;
      this.getCommentsList({
        payload: {
          id: this.id,
          page: this.page
        }
      })
    },
    async handleSubmitComment () {
      if (!this.introduction.trim()) {
        this.$toast('请填写评论内容!');
        return false;
      }
      await this.submitComment({
        payload: {
          introduction: this.introduction,
          id: this.id
        }
      })
      this.introduction = ''
      this.page = 1
    }
  },
  computed: {
   ...mapState(['commentsList']),
   ...mapGetters(['commentsListLength'])
  },
  created () {
    this.getCommentsList({
      payload: {
        id: this.id,
        page: this.page
      }
    })
  }
}
</script>

<style lang="less">
  .common-comment {
    margin: 10px 0;
    .comment-header {
      display: flex;
      justify-content: space-between;
    }
    .mint-cell-value {
      border: 1px solid #bbb;
    }
    .btn-field {
      margin: 10px;
      text-align: center;
    }
    .comment-list {
      .list-header {
        display: flex;
        justify-content: space-between;
      }
      .list-item {
        line-height: 2;
        display: flex;
        justify-content: space-between;
      }
    }
  }
</style>